<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-input v-model="select_word" placeholder="请输入链接名称" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="primary"  icon="el-icon-lx-add" @click="handleAdd">添加</el-button>
                <el-button type="primary"  icon="el-icon-refresh" @click="refresh">刷新</el-button>
            </div>
            <ces-table
                    :tableHeight='tableHeight'
                    :that='that'
                    size='small '
                    :isSelection='true'
                    :isIndex='true'
                    :isHandle='true'
                    :tableData='tableData'
                    :tableCols='tableCols'
                    :isPagination='true'
                    :tablePage='pagination'>
            </ces-table>
            <cesEdit :Visible="cesEditVisible"  :data="form"></cesEdit>
        </div>
    </div>
</template>

<script>
    import cesTable from '../../../../views/common/Table'
    import cesEdit from './edit'

    export default {
        name: "demoTable",
        components : {
            cesTable,
            cesEdit
        },
        //弹出页面保存完数据后调用该页面的pages方法刷新列表数据
        provide(){
            return{
                refresh:this.refresh
            }
        },
        data () {
            return  {
                that : this,
                tableHeight: window.innerHeight  - 288,
                url_page: '/cms/link/pages',
                url_dele: '/cms/link/delete',
                select_word: '',
                cesEditVisible:false,
                cesAuthVisible:false,
                // 表头及字段
                tableCols: [
                    {label:'标题',prop:'link_title'},
                    {label:'图片路径',prop:'link_images'},
                    {label:'链接地址',prop:'link_address'},
                    {label:'备注',prop:'link_remarks'},
                    {label:'操作记录',type:'Button',width:'280',
                        btnList:[
                        {type:'text',label:'编辑',icon:'el-icon-edit',handle:(row,that)=>this.handleEdit(row,that)},
                        {type:'text',label:'删除',icon:'el-icon-delete',class:'red',handle:(row,that)=>this.handleDelete(row,that)},
                        ]},
                ],
                tableData : [],//表格数据
                pagination : {
                    pageSize:10,pageNum:1,total:10
                },
                form: {
                    page:'1',//第几页
                    limit:'10'//每页条数，默认10条
                }
            }
        },
        created(){
            this.refresh();
        },
        methods : {
            //变更分页条数
            handleSizeChange(val) {
                console.log(val);
                this.form.limit=val;
                this.getPages();//根据用户获取的每页显示页面数量显示页面
            },
            //变更上一页下一页
            handleCurrentChange(val){
                console.log(val);
                this.form.page=val;
                this.getPages()
            },
            // 获取 easy-mock 的模拟数据
            getPages() {
                this.cesEditVisible = false;
                this.cesAuthVisible = false;
                this.form.limit=this.pagination.pageSize;
                this.form.page = this.pagination.pageNum;
                this.$post(this.url_page,this.form).then(res => {
                    if(res.data){
                        this.tableData = res.data;
                        this.pagination.total = res.data.total;
                    }
                })
            },
            /*搜索查询*/
            search(){
                this.form.link_title = this.select_word;
                this.getPages();
            },
            //刷新
            refresh(){
                this.cesEditVisible= false
                this.cesAuthVisible = true;
                this.select_word="";
                this.form={};
                this.getPages();
            },
            //添加
            handleAdd(index,row){
                this.cesEditVisible=true;
                let now   = new Date();
                let monthn = now.getMonth()+1;
                let yearn  = now.getFullYear();
                let dayn = now.getDate();
                let linkTime = yearn+"-"+monthn+"-"+dayn;
                this.form={link_pk:''}
            },
            //编辑
            handleEdit(index, row) {
                this.cesEditVisible=true;
                this.form = {
                    link_pk: row.link_pk,
                    link_title: row.link_title,
                    link_images: row.link_images,
                    link_remarks: row.link_remarks,
                    link_address: row.link_address
                };
            },
            //授权
            handleAuth(index, row) {
                if(row.link_status == "1") {
                    this.cesAuthVisible = true;
                    this.cesEditVisible = false;
                    this.form = {
                        link_pk: row.link_pk
                    }
                    //调用弹出页面获取所有的菜单然后查出授权的菜单
                    this.$refs.authTree.getData(row.link_pk)
                }else{
                    this.$message({
                        type:'',
                        message: '角色已禁用,无法授权!',
                    });
                    this.refresh();
                }
            },
            //删除
            handleDelete(index, row){
                if(row.link_pk !=null && row.link_pk!=''){
                    this.$confirm('确定要删除数据吗？','提示',{
                        confirmButtonText: '确定',cancleButtonText:'取消',type:'warning'
                    }).then(()=>{
                        this.$post(this.url_dele,{link_pk:row.link_pk}).then(res => {
                            this.$message({
                                type : 'success',
                                message: res.msg,
                            });
                            this.refresh();
                        })
                    })
                }
            }
        },
        /*全页面监听回车查询事件*/
        mounted() {
            let _this = this
            document.onkeydown = function (e) {
                if (e.keyCode === 13) {
                    _this.search();
                }
            }
        }
    };
</script>

<style scoped>
    @import "../../../../assets/css/common.css";
</style>

